<template>
	<div class="user-container">
		<el-form class="el_form" style="display: flex; justify-content: flex-start; padding: 10px 10px 10px 0">
			<el-button type="primary" @click="openAddRole">添加用户</el-button>
		</el-form>

		<table-components :tableLoading="tableLoading" :tableData="tableData" @currentChange="currentChange">
			<el-table-column prop="userName" label="用户账号" align="center" />
			<el-table-column prop="name" label="用户名称" align="center" />
			<el-table-column prop="phone" label="用户手机号" align="center" />
			<el-table-column label="角色" align="center">
				<template v-slot="scope">
					<div v-if="scope.row.role === 0">
						<el-tag type="success"> 超级管理员 </el-tag>
					</div>
					<div v-else>
						<el-tag v-for="item in scope.row.roleList" :key="item.id" style="margin-right: 9px; margin-bottom: 3px">{{ item.roleName }}</el-tag>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="createBy" label="创建人" align="center" width="120px" />
			<el-table-column prop="createTime" label="创建时间" align="center" />
			<el-table-column label="操作" align="center">
				<template v-slot="scope">
					<el-button type="text" size="small" @click="openEdit(scope.row)">编辑</el-button>
					<el-button type="text" size="small" v-if="scope.row.status == 1" @click="enble(scope.row, 0)">启用</el-button>
					<el-button type="text" size="small" v-if="scope.row.status == 0" @click="enble(scope.row, 1)">禁用</el-button>
					<el-button type="text" size="small" @click="openAssociated(scope.row)" v-if="scope.row.role !== 0">关联角色</el-button>
					<el-button type="text" size="small" @click="changePwdFn(scope.row)">修改密码</el-button>
				</template>
			</el-table-column>
		</table-components>

		<!-- 添加用户和编辑用户 -->
		<addUser :isAdd="isAdd" :dialogVisible="addRoleVisible" :row="clickItem" @handleClose="addRoleClose"></addUser>

		<!-- 修改密码 -->
		<changePwd :dialogVisible="changePwdVisible" :row="clickItem" @ChangePwdClose="ChangePwdClose" />

		<!-- 关联角色 -->
		<!-- Associatedrole -->
		<AssociatedRole :dialogVisible="AssociatedVisible" :row="clickItem" @userRoleClose="userRoleClose" />
	</div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import TableComponents from '/@/components/tableComponents/index.vue';
import { getUserList, userEnble } from '/@/api/api';
import addUser from './dialog/addUser.vue';
import changePwd from './dialog/changePwd.vue';
import AssociatedRole from './dialog/associatedRole.vue';

const isAdd = ref(false);
const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});
const tableLoading = ref(true);
const queryFrom = ref({});
const addRoleVisible = ref(false);
const changePwdVisible = ref(false);
const AssociatedVisible = ref(false);
const clickItem = ref({});

// 页面加载时
onMounted(() => {
	NextLoading.done();
	getData();
});

// 获取列表数据
async function getData() {
	tableLoading.value = true;
	let par = {
		page: tableData.page,
		size: tableData.size,
		...queryFrom.value,
	};

	let { code, data } = await getUserList(par);
	if (code == 200) {
		tableData.data = data.list;
		tableData.total = data.total;
		tableLoading.value = false;
	}
}

// 启用禁用
async function enble(item: any, status: number) {
	tableLoading.value = true;
	// console.log(item)
	let par = {
		userId: item.id,
		status: status,
	};
	let { code } = await userEnble(par);
	tableLoading.value = false;
	if (code == 200) {
		ElMessage.success('操作成功');
		getData();
	}
}

// 添加用户
function openAddRole(item) {
	isAdd.value = true;
	clickItem.value = item;
	addRoleVisible.value = true;
}
// 关闭弹窗
function addRoleClose() {
	isAdd.value = true;
	addRoleVisible.value = false;
	getData();
}
// 编辑用户
function openEdit(item: any) {
	isAdd.value = false;
	clickItem.value = item;
	addRoleVisible.value = true;
}

//
function changePwdFn(item: any) {
	changePwdVisible.value = true;
	clickItem.value = item;
}

function ChangePwdClose() {
	// console.log('123')
	changePwdVisible.value = false;
}

function openAssociated(item) {
	clickItem.value = item;
	AssociatedVisible.value = true;
}

function userRoleClose() {
	AssociatedVisible.value = false;
	getData();
}
</script>

<style scoped lang="scss">
// @import url('/@/theme/page/page.scss');
.user-container {
	padding: 0 20px 20px 20px;
}
</style>
